<!--
jquery 选择器学习。
以下部分：
“_lab_”表示各html标签
“_pro_”表示各标签中的属性
“_val_”表示属性值
 "_class_"标识class

1、选择全部
    选择所有属性
    $("*")

2、属性选择
    $("_lab_[_pro_=_val_]")
    注：
    |=：选择指定属性等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-” ）的元素
    *=：选择指定属性具有包含一个给定的子字符串的元素（选择给定的属性是以包含某些值的元素）
    ~=：选择指定属性用空格分隔的值中包含一个给定值的元素
    $=：选择指定属性是以给定值结尾的元素。这个比较是区分大小写的
    = ：选择指定属性是给定值的元素
    !=：选择不存在指定属性，或者指定的属性值不等于给定值的元素
    ^=：选择指定属性是以给定字符串开始的元素
3、Class选择
    $("._class_")


-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <script type="text/javascript" src="../../js/jquery-1.6.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#button1").click(function(){
                //选择所有div标签
                $("div").css("border","3px solid red");
            });
            $("#button2").click(function(){
                //选择id为div2的标签
                $("#div2").css("border","3px solid red");
            });
            $("#button3").click(function(){
                //选择div标签中pro属性值是以"learn-"开头的div标签
                $("div[pro|=learn]").css("border","3px solid red");
            });
            $("#button4").click(function(){
                //body下的第一个ul元素下的最后一个
                $("body>ul:first>li:last").css("border","3px solid red");
            });
            $("#button5").click(function(){
                $("ul").children("*:first-child").css("border","3px solid red");
            });
        });
    </script>
</head>
<body>
<div pro="learn-one" id="div1">div1</div>
<div pro="learn-two" id="div2">div2</div>
<div pro="learn-three" id="div3">div3</div>
<div pro="four" id="div4">div4</div>
<div pro="five" id="div5">div5</div>

<ul attr="ul-go">
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ul>
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ul>

<span id="buttons" name="buttons">
    <input id="button1" type="button" value="select all div"/>
    <input id="button2" type="button" value="select div2 from id"/>
    <input id="button3" type="button" value="select learn-* div from div attribute"/>
    <input id="button4" type="button" value="Portfolio Selection"/>
    <button id="button5">show ul's children</button>
</span>
</body>
</html>